{% extends "base.html" %}

{% block content %}
    <form action="/process" method="post" enctype="multipart/form-data" class="row g-3">
        <!-- 文件上传 -->
        <div class="col-12">
            <div class="input-group mb-3">
                <input type="file" class="form-control" name="files" multiple required>
                <label class="input-group-text">上传图片（支持多选）</label>
            </div>
        </div>

        <!-- 处理选项 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">尺寸调整</div>
                <div class="card-body">
                    <input type="text" class="form-control" name="size" placeholder="例如：800x600">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">格式转换</div>
                <div class="card-body">
                    <select class="form-select" name="format">
                        <option value="">保持原格式</option>
                        <option value="jpg">JPG</option>
                        <option value="png">PNG</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 水印设置 -->
        <div class="col-12">
            <div class="card">
                <div class="card-header">水印设置</div>
                <div class="card-body">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="watermark_type" id="none" value="none">
                        <label class="form-check-label" for="none">不添加水印</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="watermark_type" id="text" value="text" checked>
                        <label class="form-check-label" for="text">文字水印</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="watermark_type" id="image" value="image">
                        <label class="form-check-label" for="image">图片水印</label>
                    </div>

                    <!-- 文字水印参数 -->
                    <div id="text-options" class="mt-3 watermark-options">
                        <div class="input-group mb-3">
                            <span class="input-group-text">文字内容</span>
                            <input type="text" class="form-control" name="text" placeholder="请输入文字">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text">颜色</span>
                            <input type="color" class="form-control form-control-color" name="text_color" value="#000000">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text">透明度</span>
                            <input type="range" class="form-range" name="text_opacity" min="0" max="1" step="0.1" value="0.5">
                        </div>
                    </div>

                    <!-- 图片水印参数 -->
                    <div id="image-options" class="mt-3 d-none watermark-options">
                        <div class="input-group mb-3">
                            <span class="input-group-text">上传水印图片</span>
                            <input type="file" class="form-control" name="image_watermark">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text">透明度</span>
                            <input type="range" class="form-range" name="image_opacity" min="0" max="1" step="0.1" value="0.5">
                        </div>
                    </div>

                    <!-- 公共位置选择 -->
                    <div id="watermark-position" class="mb-3">
                        <label class="form-label">水印位置</label>
                        <select class="form-select" name="position">
                            <option value="top_left">左上</option>
                            <option value="top_right">右上</option>
                            <option value="bottom_left">左下</option>
                            <option value="bottom_right">右下</option>
                            <option value="center">居中</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary w-100 mt-3">开始处理</button>
    </form>
{% endblock %}

{% block scripts %}
    <script>
        // 初始化水印选项显示状态的函数
        function updateWatermarkOptions() {
            // 获取当前选中的水印类型
            const selectedType = document.querySelector('input[name="watermark_type"]:checked').value;
            
            // 隐藏所有水印选项
            document.querySelectorAll('.watermark-options').forEach(el => {
                el.classList.add('d-none');
            });
            
            // 水印位置区域
            const positionEl = document.getElementById('watermark-position');
            
            // 根据选中的类型显示相应选项
            if (selectedType === 'text') {
                document.getElementById('text-options').classList.remove('d-none');
                positionEl.classList.remove('d-none');
            } else if (selectedType === 'image') {
                document.getElementById('image-options').classList.remove('d-none');
                positionEl.classList.remove('d-none');
            } else if (selectedType === 'none') {
                // 不添加水印时保持隐藏
                positionEl.classList.add('d-none');
            }
        }
        
        // 页面加载时初始化一次
        document.addEventListener('DOMContentLoaded', updateWatermarkOptions);
        
        // 切换水印类型时更新显示
        document.querySelectorAll('input[name="watermark_type"]').forEach(radio => {
            radio.addEventListener('change', updateWatermarkOptions);
        });
    </script>
{% endblock %}